{% if id_Personagem %}
<script>
	$(function() {
		$('#info table tr .hp').addClass('campo');
		$('#info table tr .mp').addClass('campo');
		mp = ((parseInt($('#info table tr .mp').attr('value'))/parseInt($('#info table tr .mp').attr('rel')))*100);
		$('.mp-status').css('width', (mp-2)+'px');
		hp = ((parseInt($('#info table tr .hp').attr('value'))/parseInt($('#info table tr .hp').attr('rel')))*100);
		$('.hp-status').css('width', (hp-2)+'px');
	});
</script>

<style>
.campo{
	height: 12px;
	width: 100px;
	margin: 3px 0;
}
</style>

<div id="img-avatar">
	<img src="{{ avatar_personagem }}" width="170" height="185" />
</div>
	<center id="name">{{ nome|capfirst }}</center>
<div id="info">
	<table>
		<tr>
			<td>HP:</td>
			<td class="hp" value="{{ hp_atual }}" rel="{{ hp }}">
				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: left"></div>
				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/bg.gif'); height: 13px; width: 98px; display: block; float: left">
				<span class="hp-status" style="background: url('{{ MEDIA_URL }}img/progress-bar/on_green.gif'); display: block; float: left; height: 11px; margin: 1px 0; font-size: 8px; font-family: Tahoma; line-height: 11px; font-weight: bold; text-align: right; color: #000; letter-spacing: 1px;"></span>
				</div>
				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: right"></div>
			</td>
		</tr>
		<tr>
			<td>MP:</td>
			<td class="mp" value="{{ mp_atual }}" rel="{{ mp }}">
				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: left"></div>
				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/bg.gif'); height: 13px; width: 98px; display: block; float: left">
				<span class="mp-status" style="background: url('{{ MEDIA_URL }}img/progress-bar/on_blue.gif'); display: block; float: left; height: 11px; margin: 1px 0; font-size: 8px; font-family: Tahoma; line-height: 11px; font-weight: bold; text-align: right; color: #000; letter-spacing: 1px;"></span>
				</div>
 				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: right"></div>
			</td>
		</tr>
		<tr>
			<td>Level:</td>
			<td>{{ nivel }}</td>
		</tr>
	</table>
</div>

{% endif %} 